<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/dist/css/bootstrap.css">

<div id="hotelRoomDiv">
    <h4>酒店房间</h4>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>房型数量</h5>
            <form class="form-inline">
                <label>
                    <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="hotelRoom.roomNum"/>
                </label>间
            </form>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>房型</h5>
            <div class="form-group">
                <label for="hotelRoomName">房间类型名称</label>
                <input type="text" class="form-control" id="hotelRoomName" placeholder="请填写房间类型名称"
                       v-model:value="hotelRoom.roomName">
            </div>
            <div class="form-group">
                <label>房型图片</label>
                <input id="hotelRoomImage" name="file" type="file" multiple=true>
            </div>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>包含的床和数量</h5>
            <div v-for="(item,index) in hotelRoom.beds">
                <div class="form-group">
                    <label for="hotelBedType">床型名称</label>
                    <input type="text" class="form-control" id="hotelBedType" placeholder="请填写床型名称"
                           v-model:value="item.bedName"/>
                </div>
                <form class="form-inline">
                    <label>
                        <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="item.bedNum"/>
                    </label>张
                </form>
            </div>
            <button onclick="addBedNum()">添加床型</button>
            <button onclick="deleteBedNum()">删除床型</button>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>包含的早餐数量</h5>
            <form class="form-inline">
                <label>
                    <input type="number" class="form-control mb-2 mr-sm-2" v-model:value="hotelRoom.breakfastNum"/>
                </label>份
            </form>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>描述</h5>
            <div class="form-group">
                <label for="hotelRoomDetail">房间描述</label>
                <textarea rows="3" type="text" class="form-control" id="hotelRoomDetail" placeholder="请填写房间描述"
                          v-model:value="hotelRoom.roomDetail">
                </textarea>
            </div>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>房间价格</h5>
            <form class="form-inline">
                <label>
                    <input type="number" step="0.1" class="form-control mb-2 mr-sm-2"
                           v-model:value="hotelRoom.roomCost"/>
                </label>元/晚
            </form>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>预定支付方式</h5>
            <div class="form-group">
                <label for="hotelOrderType">预定支付方式</label>
                <input type="text" class="form-control" id="hotelOrderType" placeholder="请填写预定支付方式名称"
                       v-model:value="hotelRoom.payType">
            </div>
        </div>
    </div>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <button type="button" class="btn-primary" onclick="saveHotelRoom()">保存</button>
        </div>
    </div>
</div>

<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>

<script>
    var hotelRoomVue = new Vue({
        el: "#hotelRoomDiv",
        data: {
            hotelRoom: {
                user: {
                    userId: $("#userId").val()
                },
                roomNum: "",
                roomName: "",
                beds: [{
                    bedName: "",
                    bedNum: ""
                }],
                breakfastNum: "",
                roomDetail: "",
                roomCost: "",
                payType: "",
                hotelImages: [],
            }
        },
        methods: {
            initImage: function () {
                var self = this;
                $("#hotelRoomImage").fileinput({
                    language: "zh",
                    uploadUrl: "/api/upload/hotelRoom",
                    allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                    showUpload: true,
                    showRemove: false,
                    showPreview: true,
                    showCaption: true,
                    browseClass: "btn btn-primary",
                    removeClass: "btn btn-danger",
                    dropZoneEnabled: true,
                    maxFileCount: 5,
                    autoReplace: true,//是否可替换
                    layoutTemplates: {
                        actionUpload: ''
                    },
                    enctype: 'multipart/form-data',
                    msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                    validateInitialCount: true,
                }).on('fileerror', function (event, data, msg) {
                    layer.alert("Upload file failed" + msg, {icon: 0});
                }).on('fileuploaded', function (event, data) {
                    if (data.response.status === 200) {
                        console.log(data.response.data)
                        self.hotelRoom.hotelImages.push({"image": data.response.data})
                    } else {
                        $(".fileinput-remove-button").click();
                    }
                    layer.alert(data.response.message, {icon: 0});
                }).on('fileclear', function (event) {
                });
            },
            addBedNum: function () {
                var self = this;
                self.hotelRoom.beds.push({
                    bedName: "",
                    bedNum: ""
                })
            },
            deleteBedNum: function () {
                var self = this;
                if (self.hotelRoom.beds.length > 1) {
                    self.hotelRoom.beds.splice(-1);
                }
            },
            saveHotelRoom: function () {
                var self = this;
                // console.log(self.hotelRoom);
                if (self.hotelRoom.roomNum === "0" || self.hotelRoom.roomNum === "") {
                    layer.alert("房型数量不能为0", {icon: 0});
                } else if (self.hotelRoom.roomName === "") {
                    layer.alert("房间类型名称不能为空", {icon: 0});
                } else if (self.hotelRoom.breakfastNum === "0" || self.hotelRoom.breakfastNum === "") {
                    layer.alert("早餐数量不能为0", {icon: 0});
                } else if (self.hotelRoom.roomDetail === "") {
                    layer.alert("房间描述不能为空", {icon: 0});
                } else if (self.hotelRoom.roomCost === "" || self.hotelRoom.roomCost === "0") {
                    layer.alert("房间价格不能为0", {icon: 0});
                } else if (self.hotelRoom.payType === "") {
                    layer.alert("预定支付方式不能为空", {icon: 0});
                } else {
                    var flag = false;
                    $.each(self.hotelRoom.beds, function (index, bed) {
                        if (bed.bedName === "" || bed.bedNum === "" || bed.bedNum === "0") {
                            flag = true;
                        }
                    });
                    if (flag) {
                        layer.alert("床型名称和数量不能为空", {icon: 0});
                    } else {
                        $.ajax({
                            url: "/api/room",
                            type: "post",
                            contentType: "application/json",
                            data: JSON.stringify(self.hotelRoom),
                            success: function (rs) {
                                if (rs.status === 200) {
                                    self.hotelRoom = {
                                        user: {
                                            userId: $("#userId").val()
                                        },
                                        roomNum: "",
                                        roomName: "",
                                        beds: [{
                                            bedName: "",
                                            bedNum: ""
                                        }],
                                        breakfastNum: "",
                                        roomDetail: "",
                                        roomCost: "",
                                        payType: "",
                                        hotelImages: [],
                                    }
                                    $(".fileinput-remove").click()
                                    layer.alert("提交成功", {icon: 0});
                                } else {
                                    layer.alert(rs.message, {icon: 0});
                                }
                            },
                            error: function (rs) {
                                layer.alert(rs.responseText, {icon: 0});
                            }
                        })
                    }
                }
            }
        },
        created: function () {
            window.addBedNum = this.addBedNum;
            window.deleteBedNum = this.deleteBedNum;
            window.saveHotelRoom = this.saveHotelRoom;
        },
        mounted: function () {
            this.initImage();
        }
    })
</script>